<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Allaia | Bootstrap eCommerce Template - ThemeForest</title>

    <!-- Favicons-->
    <link rel="shortcut icon" th:href="@{/assets/img/favicon.ico}" type="image/x-icon">
    <link rel="apple-touch-icon" type="image/x-icon" th:href="@{/assets/img/apple-touch-icon-57x57-precomposed.png}">
    <link rel="apple-touch-icon" type="image/x-icon" sizes="72x72" th:href="@{/assets/img/apple-touch-icon-72x72-precomposed.png}">
    <link rel="apple-touch-icon" type="image/x-icon" sizes="114x114" th:href="@{/assets/img/apple-touch-icon-114x114-precomposed.png}">
    <link rel="apple-touch-icon" type="image/x-icon" sizes="144x144" th:href="@{/assets/img/apple-touch-icon-144x144-precomposed.png}">

    <!-- GOOGLE WEB FONT -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

    <!-- BASE CSS -->
    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/assets/css/style.css}" rel="stylesheet">
    <!-- YOUR CUSTOM CSS -->
    <link th:href="@{/assets/css/custom.css}" rel="stylesheet">
    <!-- BASE CSS -->
    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/assets/css/style.css}" rel="stylesheet">

	<!-- SPECIFIC CSS -->
    <link th:href="@{/assets/css/account.css}" rel="stylesheet">
    <style>
        .box_account{
            margin-bottom: 0;
            margin-top: 20px;
        }
        #loginContent{
            width: 30%;
            height: 500px;
            margin: 0 auto;
        }


        .captcha-img{
            width: 130px;
            height: 50px;
            margin: 0 auto;
        }
        .captcha-img img {
            height: 34px;
            border: 1px solid #e6e6e6;
            height: 36px;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="page">

    <header class="version_1">
        <div class="layer"></div><!-- Mobile menu overlay mask -->
        <div class="main_header">
            <div class="container">
                <div class="row small-gutters">
                    <div class="col-xl-3 col-lg-3 d-lg-flex align-items-center">
                        <div id="logo">
                            <a href="index.html"><img th:src="@{/assets/img/logo.svg}" alt="" width="100" height="35"></a>
                        </div>
                    </div>
                    <nav class="col-xl-6 col-lg-7">
                        <a class="open_close" href="javascript:void(0);">
                            <div class="hamburger hamburger--spin">
                                <div class="hamburger-box">
                                    <div class="hamburger-inner"></div>
                                </div>
                            </div>
                        </a>
                        <!-- Mobile menu button -->
                        <div class="main-menu">
                            <div id="header_menu">
                                <a href="index.html"><img th:src="@{/assets/img/logo_black.svg}" alt="" width="100" height="35"></a>
                                <a href="#" class="open_close" id="close_in"><i class="ti-close"></i></a>
                            </div>
                            <ul>
                                <li class="submenu">
                                    <a th:href="@{/index}" class="show-submenu">首页</a>
                                    <ul>
                                        <li><a href="index.html">Slider</a></li>
                                        <li><a href="index-2.html">Video Background</a></li>
                                        <li><a href="index-3.html">Vertical Slider</a></li>
                                        <li><a href="index-4.html">GDPR Cookie Bar</a></li>
                                    </ul>
                                </li>
                                <li class="megamenu submenu">
                                    <a href="javascript:void(0);" class="show-submenu-mega">Pages</a>
                                    <div class="menu-wrapper">
                                        <div class="row small-gutters">
                                            <div class="col-lg-3">
                                                <h3>Listing grid</h3>
                                                <ul>
                                                    <li><a href="listing-grid-1-full.html">Grid Full Width</a></li>
                                                    <li><a href="listing-grid-2-full.html">Grid Full Width 2</a></li>
                                                    <li><a href="listing-grid-3.html">Grid Boxed</a></li>
                                                    <li><a href="listing-grid-4-sidebar-left.html">Grid Sidebar Left</a></li>
                                                    <li><a href="listing-grid-5-sidebar-right.html">Grid Sidebar Right</a></li>
                                                    <li><a href="listing-grid-6-sidebar-left.html">Grid Sidebar Left 2</a></li>
                                                    <li><a href="listing-grid-7-sidebar-right.html">Grid Sidebar Right 2</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-3">
                                                <h3>Listing row &amp; Product</h3>
                                                <ul>
                                                    <li><a href="listing-row-1-sidebar-left.html">Row Sidebar Left</a></li>
                                                    <li><a href="listing-row-2-sidebar-right.html">Row Sidebar Right</a></li>
                                                    <li><a href="listing-row-3-sidebar-left.html">Row Sidebar Left 2</a></li>
                                                    <li><a href="listing-row-4-sidebar-extended.html">Row Sidebar Extended</a></li>
                                                    <li><a href="product-detail-1.html">Product Large Image</a></li>
                                                    <li><a href="product-detail-2.html">Product Carousel</a></li>
                                                    <li><a href="product-detail-3.html">Product Sticky Info</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-3">
                                                <h3>Other pages</h3>
                                                <ul>
                                                    <li><a href="cart.html">Cart Page</a></li>
                                                    <li><a href="order.html">Check Out Page</a></li>
                                                    <li><a href="confirm.html">Confirm Purchase Page</a></li>
                                                    <li><a href="account.html">Create Account Page</a></li>
                                                    <li><a href="track-order.html">Track Order</a></li>
                                                    <li><a href="help.html">Help Page</a></li>
                                                    <li><a href="help-2.html">Help Page 2</a></li>
                                                    <li><a href="leave-review.html">Leave a Review</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-3 d-xl-block d-lg-block d-md-none d-sm-none d-none">
                                                <div class="banner_menu">
                                                    <a href="#0">
                                                        <img src="" th:data-src="@{/assets/img/banner_menu.jpg}" width="400" height="550" alt="" class="img-fluid lazy">
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- /row -->
                                    </div>
                                    <!-- /menu-wrapper -->
                                </li>
                                <li class="submenu">
                                    <a href="javascript:void(0);" class="show-submenu">Extra Pages</a>
                                    <ul>
                                        <li><a href="header-2.html">Header Style 2</a></li>
                                        <li><a href="header-3.html">Header Style 3</a></li>
                                        <li><a href="header-4.html">Header Style 4</a></li>
                                        <li><a href="header-5.html">Header Style 5</a></li>
                                        <li><a href="404.html">404 Page</a></li>
                                        <li><a href="sign-in-modal.html">Sign In Modal</a></li>
                                        <li><a href="contacts.html">Contact Us</a></li>
                                        <li><a href="about.html">About 1</a></li>
                                        <li><a href="about-2.html">About 2</a></li>
                                        <li><a href="modal-advertise.html">Modal Advertise</a></li>
                                        <li><a href="modal-newsletter.html">Modal Newsletter</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="blog.html">Blog</a>
                                </li>
                                <li>
                                    <a href="#0">Buy Template</a>
                                </li>
                            </ul>
                        </div>
                        <!--/main-menu -->
                    </nav>
                    <div class="col-xl-3 col-lg-2 d-lg-flex align-items-center justify-content-end text-end">
                        <a class="phone_top" href="tel://9438843343"><strong><span>Need Help?</span>+94 423-23-221</strong></a>
                    </div>
                </div>
                <!-- /row -->
            </div>
        </div>
        <!-- /main_header -->

        <div class="main_nav inner Sticky">
            <div class="container">
                <div class="row small-gutters">
                    <div class="col-xl-3 col-lg-3 col-md-3">
                        <nav class="categories">
                            <ul class="clearfix">
                                <li><span>
										<a href="#">
											<span class="hamburger hamburger--spin">
												<span class="hamburger-box">
													<span class="hamburger-inner"></span>
												</span>
											</span>
											Categories
										</a>
									</span>
                                    <div id="menu">
                                        <ul>
                                            <li><span><a href="#0">Collections</a></span>
                                                <ul>
                                                    <li><a href="listing-grid-1-full.html">Trending</a></li>
                                                    <li><a href="listing-grid-2-full.html">Life style</a></li>
                                                    <li><a href="listing-grid-3.html">Running</a></li>
                                                    <li><a href="listing-grid-4-sidebar-left.html">Training</a></li>
                                                    <li><a href="listing-grid-5-sidebar-right.html">View all Collections</a></li>
                                                </ul>
                                            </li>
                                            <li><span><a href="#">Men</a></span>
                                                <ul>
                                                    <li><a href="listing-grid-6-sidebar-left.html">Offers</a></li>
                                                    <li><a href="listing-grid-7-sidebar-right.html">Shoes</a></li>
                                                    <li><a href="listing-row-1-sidebar-left.html">Clothing</a></li>
                                                    <li><a href="listing-row-3-sidebar-left.html">Accessories</a></li>
                                                    <li><a href="listing-row-4-sidebar-extended.html">Equipment</a></li>
                                                </ul>
                                            </li>
                                            <li><span><a href="#">Women</a></span>
                                                <ul>
                                                    <li><a href="listing-grid-1-full.html">Best Sellers</a></li>
                                                    <li><a href="listing-grid-2-full.html">Clothing</a></li>
                                                    <li><a href="listing-grid-3.html">Accessories</a></li>
                                                    <li><a href="listing-grid-4-sidebar-left.html">Shoes</a></li>
                                                </ul>
                                            </li>
                                            <li><span><a href="#">Boys</a></span>
                                                <ul>
                                                    <li><a href="listing-grid-6-sidebar-left.html">Easy On Shoes</a></li>
                                                    <li><a href="listing-grid-7-sidebar-right.html">Clothing</a></li>
                                                    <li><a href="listing-row-3-sidebar-left.html">Must Have</a></li>
                                                    <li><a href="listing-row-4-sidebar-extended.html">All Boys</a></li>
                                                </ul>
                                            </li>
                                            <li><span><a href="#">Girls</a></span>
                                                <ul>
                                                    <li><a href="listing-grid-1-full.html">New Releases</a></li>
                                                    <li><a href="listing-grid-2-full.html">Clothing</a></li>
                                                    <li><a href="listing-grid-3.html">Sale</a></li>
                                                    <li><a href="listing-grid-4-sidebar-left.html">Best Sellers</a></li>
                                                </ul>
                                            </li>
                                            <li><span><a href="#">Customize</a></span>
                                                <ul>
                                                    <li><a href="listing-row-1-sidebar-left.html">For Men</a></li>
                                                    <li><a href="listing-row-2-sidebar-right.html">For Women</a></li>
                                                    <li><a href="listing-row-4-sidebar-extended.html">For Boys</a></li>
                                                    <li><a href="listing-grid-1-full.html">For Girls</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <div class="col-xl-6 col-lg-7 col-md-6 d-none d-md-block">
                        <div class="custom-search-input">
                            <input type="text" placeholder="Search over 10.000 products">
                            <button type="submit"><i class="header-icon_search_custom"></i></button>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-2 col-md-3">
                        <ul class="top_tools">
                            <li>
                                <div class="dropdown dropdown-cart">
                                    <a href="cart.html" class="cart_bt"><strong>2</strong></a>
                                    <div class="dropdown-menu">
                                        <ul>
                                            <li>
                                                <a href="product-detail-1.html">
                                                    <figure><img th:src="@{/assets/img/products/product_placeholder_square_small.jpg}" th:data-src="@{/assets/img/products/shoes/thumb/1.jpg}" alt="" width="50" height="50" class="lazy"></figure>
                                                    <strong><span>1x Armor Air x Fear</span>$90.00</strong>
                                                </a>
                                                <a href="#0" class="action"><i class="ti-trash"></i></a>
                                            </li>
                                            <li>
                                                <a href="product-detail-1.html">
                                                    <figure><img th:src="@{/assets/img/products/product_placeholder_square_small.jpg}" th:data-src="@{/assets/img/products/shoes/thumb/2.jpg}" alt="" width="50" height="50" class="lazy"></figure>
                                                    <strong><span>1x Armor Okwahn II</span>$110.00</strong>
                                                </a>
                                                <a href="0" class="action"><i class="ti-trash"></i></a>
                                            </li>
                                        </ul>
                                        <div class="total_drop">
                                            <div class="clearfix"><strong>Total</strong><span>$200.00</span></div>
                                            <a href="cart.html" class="btn_1 outline">View Cart</a><a href="order.html" class="btn_1">Checkout</a>
                                        </div>
                                    </div>
                                </div>
                                <!-- /dropdown-cart-->
                            </li>
                            <li>
                                <a href="#0" class="wishlist"><span>Wishlist</span></a>
                            </li>
                            <li>
                                <div class="dropdown dropdown-access">
                                    <a th:href="@{/personal/orders}" class="access_link"><span>Account</span></a>
                                    <div class="dropdown-menu">
                                        <a href="#" class="btn_1" id="sing-in-up">登录/注册</a>
                                        <ul>
                                            <li>
                                                <a href="track-order.html"><i class="ti-truck"></i>查询订单</a>
                                            </li>
                                            <li>
                                                <a th:href="@{/personal/orders}"><i class="ti-package"></i>我的订单</a>
                                            </li>
                                            <li>
                                                <a href="account.html"><i class="ti-user"></i>我的账户</a>
                                            </li>
                                            <li>
                                                <a href="help.html"><i class="ti-help-alt"></i>常见问题</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- /dropdown-access-->
                            </li>
                            <li>
                                <a href="javascript:void(0);" class="btn_search_mob"><span>Search</span></a>
                            </li>
                            <li>
                                <a href="#menu" class="btn_cat_mob">
                                    <div class="hamburger hamburger--spin" id="hamburger">
                                        <div class="hamburger-box">
                                            <div class="hamburger-inner"></div>
                                        </div>
                                    </div>
                                    Categories
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- /row -->
            </div>
            <div class="search_mob_wp">
                <input type="text" class="form-control" placeholder="Search over 10.000 products">
                <input type="submit" class="btn_1 full-width" value="Search">
            </div>
            <!-- /search_mobile -->
        </div>
        <!-- /main_nav -->
    </header>
    <!-- /header -->

    <main class="bg_gray">
        <div id="loginContent">
            <div class="box_account" style="padding-top: 10px; width: 450px">
                <h3 class="client">已有账户</h3>
                <div class="form_container">
                    <form action="/user/login" method="post" name="user-login" accept-charset="UTF-8">
                        <div class="row no-gutters">
                            <div class="col-lg-6 pr-lg-1">
                                <a href="#0" class="social_bt facebook"><svg t="1694088229252" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4019" width="25" height="25"><path d="M664.084 376.052c9.874 0 19.655 0.707 29.358 1.757-26.36-119.849-157.596-208.904-307.36-208.904-167.452 0-304.629 111.461-304.629 252.993 0 81.721 45.637 148.792 121.914 200.826l-30.47 89.458 106.479-52.133c38.128 7.393 68.674 14.938 106.708 14.938 9.569 0 19.063-0.441 28.459-1.163-5.995-19.884-9.396-40.731-9.396-62.314-0.039-129.954 114.253-235.458 258.937-235.458z m-163.788-80.651c22.942 0 38.108 14.729 38.108 37.136 0 22.292-15.203 37.231-38.108 37.231-22.808 0-45.75-14.939-45.75-37.231 0-22.369 22.942-37.136 45.75-37.136z m-213.222 74.368c-22.83 0-45.905-14.94-45.905-37.231 0-22.369 23.039-37.137 45.905-37.137 22.827 0 38.034 14.729 38.034 37.137 0 22.291-15.167 37.231-38.034 37.231z m655.064 238.15c0-118.895-121.874-215.857-258.781-215.857-144.952 0-259.106 96.925-259.106 215.857 0 119.127 114.156 215.856 259.106 215.856 30.336 0 60.939-7.465 91.405-14.933l83.536 44.662-22.904-74.332c61.187-44.757 106.744-104.185 106.744-171.253zM599.344 570.69c-15.168 0-30.45-14.732-30.45-29.763 0-14.807 15.284-29.708 30.452-29.708 23.034 0 38.128 14.939 38.128 29.708 0.033 15.031-15.055 29.763-38.13 29.763z m167.606 0c-15.09 0-30.26-14.732-30.26-29.763 0-14.807 15.204-29.708 30.26-29.708 22.809 0 38.11 14.939 38.11 29.708 0.001 15.031-15.301 29.763-38.11 29.763z" fill="#00C80A" p-id="4020"></path></svg>微 信</a>
                            </div>
                            <div class="col-lg-6 pl-lg-1">
                                <a href="#0" class="social_bt google"><svg t="1694089014554" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19326" width="20" height="20"><path d="M511.037 986.94c-85.502 0-163.986-26.686-214.517-66.544-25.66 7.149-58.486 18.655-79.202 32.921-17.725 12.202-15.516 24.647-12.32 29.67 14.027 22.069 240.622 14.092 306.04 7.219v-3.265z" fill="#FAAD08" p-id="19327"></path><path d="M495.627 986.94c85.501 0 163.986-26.686 214.518-66.544 25.66 7.149 58.485 18.655 79.203 32.921 17.724 12.202 15.512 24.647 12.32 29.67-14.027 22.069-240.623 14.092-306.042 7.219v-3.265z" fill="#FAAD08" p-id="19328"></path><path d="M496.137 472.026c140.73-0.935 253.514-27.502 291.73-37.696 9.11-2.432 13.984-6.789 13.984-6.789 0.032-1.25 0.578-22.348 0.578-33.232 0-183.287-88.695-367.458-306.812-367.47C277.5 26.851 188.8 211.021 188.8 394.31c0 10.884 0.55 31.982 0.583 33.232 0 0 3.965 4.076 11.231 6.048 35.283 9.579 150.19 37.482 294.485 38.437h1.037zM883.501 626.967c-8.66-27.825-20.484-60.273-32.455-91.434 0 0-6.886-0.848-10.366 0.158-107.424 31.152-237.624 51.006-336.845 49.808h-1.026c-98.664 1.186-227.982-18.44-335.044-49.288-4.09-1.176-12.168-0.677-12.168-0.677-11.97 31.16-23.793 63.608-32.453 91.433-41.3 132.679-27.92 187.587-17.731 188.818 21.862 2.638 85.099-99.88 85.099-99.88 0 104.17 94.212 264.125 309.947 265.596a765.877 765.877 0 0 1 5.725 0c215.738-1.471 309.947-161.424 309.947-265.595 0 0 63.236 102.519 85.102 99.88 10.186-1.231 23.566-56.14-17.732-188.819" p-id="19329"></path><path d="M429.208 303.911c-29.76 1.323-55.195-32.113-56.79-74.62-1.618-42.535 21.183-78.087 50.95-79.417 29.732-1.305 55.149 32.116 56.765 74.64 1.629 42.535-21.177 78.08-50.925 79.397m220.448-74.62c-1.593 42.507-27.03 75.941-56.79 74.62-29.746-1.32-52.553-36.862-50.924-79.397 1.614-42.526 27.03-75.948 56.764-74.639 29.77 1.33 52.57 36.881 50.951 79.417" fill="#FFFFFF" p-id="19330"></path><path d="M695.405 359.069c-7.81-18.783-86.466-39.709-183.843-39.709h-1.045c-97.376 0-176.033 20.926-183.842 39.709a6.66 6.66 0 0 0-0.57 2.672c0 1.353 0.418 2.575 1.072 3.612 6.58 10.416 93.924 61.885 183.341 61.885h1.045c89.416 0 176.758-51.466 183.34-61.883a6.775 6.775 0 0 0 1.069-3.622 6.66 6.66 0 0 0-0.567-2.664" fill="#FAAD08" p-id="19331"></path><path d="M464.674 239.335c1.344 16.946-7.87 32-20.55 33.645-12.701 1.647-24.074-10.755-25.426-27.71-1.326-16.954 7.873-32.008 20.534-33.64 12.722-1.652 24.114 10.76 25.442 27.705m77.97 8.464c2.702-4.392 21.149-27.488 59.328-19.078 10.028 2.208 14.667 5.457 15.646 6.737 1.445 1.888 1.84 4.576 0.375 8.196-2.903 7.174-8.894 6.979-12.217 5.575-2.144-0.907-28.736-16.948-53.232 6.99-1.685 1.648-4.7 2.212-7.558 0.258-2.856-1.956-4.038-5.923-2.342-8.678" p-id="19332"></path><path d="M503.821 589.328h-1.031c-67.806 0.802-150.022-8.004-229.638-23.381-6.817 38.68-10.934 87.294-7.399 145.275 8.928 146.543 97.728 238.652 234.793 239.996h5.57c137.065-1.344 225.865-93.453 234.796-239.996 3.535-57.986-0.584-106.6-7.403-145.283-79.631 15.385-161.861 24.196-229.688 23.389" fill="#FFFFFF" p-id="19333"></path><path d="M310.693 581.35v146.633s69.287 13.552 138.7 4.17V596.897c-43.974-2.413-91.4-7.79-138.7-15.546" fill="#EB1C26" p-id="19334"></path><path d="M806.504 427.238s-130.112 43.08-302.66 44.309h-1.025c-172.264-1.224-302.217-44.161-302.66-44.309L156.58 541.321c108.998 34.464 244.093 56.677 346.238 55.387l1.024-0.002c102.152 1.297 237.226-20.917 346.24-55.385l-43.579-114.083z" fill="#EB1C26" p-id="19335"></path></svg>Q Q</a>
                            </div>
                        </div>
                        <div class="divider"><span>或者</span></div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="username" id="username" placeholder="账号*">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" name="password" id="password" placeholder="密码*">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="captcha" id="captcha" placeholder="验证码*">
                        </div>
                        <a class="user-action float-start" id="register" href="javascript:void(0);">注册账号</a>
                        <div class="form-group captcha-img">
                            <img id="captchaPic" th:src="@{/user/captcha}" alt="">
                        </div>

                        <div class="clearfix add_bottom_15">
                            <div class="checkboxes float-start">
                                <label class="container_check">记住密码
                                    <input type="checkbox">
                                    <span class="checkmark"></span>
                                </label>
                            </div>

                            <div class="float-end">
                                <a id="forgot" href="javascript:void(0);">忘记密码?</a>
                            </div>
                        </div>
                        <div class="text-center"><input id="user-login" type="submit" value="登   录" style="width: 150px" class="btn_1"></div>
                    </form>
                    <div id="forgot_pw">
                        <div class="form-group">
                            <input type="email" class="form-control" name="email_forgot" id="email_forgot" placeholder="Type your email">
                        </div>
                        <p>A new password will be sent shortly.</p>
                        <div class="text-center"><input type="submit" value="Reset Password" class="btn_1"></div>
                    </div>
                </div>

                <!-- /form_container -->
            </div>
        </div>
    </main>
    <!--/main-->

    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <h3 data-bs-target="#collapse_1">Quick Links</h3>
                    <div class="collapse dont-collapse-sm links" id="collapse_1">
                        <ul>
                            <li><a href="about.html">About us</a></li>
                            <li><a href="help.html">Faq</a></li>
                            <li><a href="help.html">Help</a></li>
                            <li><a href="account.html">My account</a></li>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="contacts.html">Contacts</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <h3 data-bs-target="#collapse_2">Categories</h3>
                    <div class="collapse dont-collapse-sm links" id="collapse_2">
                        <ul>
                            <li><a href="listing-grid-1-full.html">Clothes</a></li>
                            <li><a href="listing-grid-2-full.html">Electronics</a></li>
                            <li><a href="listing-grid-1-full.html">Furniture</a></li>
                            <li><a href="listing-grid-3.html">Glasses</a></li>
                            <li><a href="listing-grid-1-full.html">Shoes</a></li>
                            <li><a href="listing-grid-1-full.html">Watches</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <h3 data-bs-target="#collapse_3">Contacts</h3>
                    <div class="collapse dont-collapse-sm contacts" id="collapse_3">
                        <ul>
                            <li><i class="ti-home"></i>97845 Baker st. 567<br>Los Angeles - US</li>
                            <li><i class="ti-headphone-alt"></i>+94 423-23-221</li>
                            <li><i class="ti-email"></i><a href="#0">info@allaia.com</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <h3 data-bs-target="#collapse_4">Keep in touch</h3>
                    <div class="collapse dont-collapse-sm" id="collapse_4">
                        <div id="newsletter">
                            <div class="form-group">
                                <input type="email" name="email_newsletter" id="email_newsletter" class="form-control" placeholder="Your email">
                                <button type="submit" id="submit-newsletter"><i class="ti-angle-double-right"></i></button>
                            </div>
                        </div>
                        <div class="follow_us">
                            <h5>Follow Us</h5>
                            <ul>
                                <li><a href="#0"><img src="" th:data-src="@{/assets/img/twitter_icon.svg}" alt="" class="lazy"></a></li>
                                <li><a href="#0"><img src="" th:data-src="@{/assets/img/facebook_icon.svg}" alt="" class="lazy"></a></li>
                                <li><a href="#0"><img src="" th:data-src="@{/assets/img/instagram_icon.svg}" alt="" class="lazy"></a></li>
                                <li><a href="#0"><img src="" th:data-src="@{/assets/img/youtube_icon.svg}" alt="" class="lazy"></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /row-->
            <hr>
            <div class="row add_bottom_25">
                <div class="col-lg-6">
                    <ul class="footer-selector clearfix">
                        <li>
                            <div class="styled-select lang-selector">
                                <select>
                                    <option value="English" selected>English</option>
                                    <option value="French">French</option>
                                    <option value="Spanish">Spanish</option>
                                    <option value="Russian">Russian</option>
                                </select>
                            </div>
                        </li>
                        <li>
                            <div class="styled-select currency-selector">
                                <select>
                                    <option value="US Dollars" selected>US Dollars</option>
                                    <option value="Euro">Euro</option>
                                </select>
                            </div>
                        </li>
                        <li><img src="" th:data-src="@{/assets/img/cards_all.svg}" alt="" width="198" height="30" class="lazy"></li>
                    </ul>
                </div>
                <div class="col-lg-6">
                    <ul class="additional_links">
                        <li><a href="#0">Terms and conditions</a></li>
                        <li>By <a href="http://www.bootstrapmb.com">Reserved</a></li>
                        <li><span>© 2022 Allaia</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    <!--/footer-->
</div>
<!-- page -->

<div id="toTop"></div><!-- Back to top button -->





</body>
<!-- COMMON SCRIPTS -->
<script th:src="@{/assets/js/common_scripts.min.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>
<script th:src="@{/assets/login/login.js}"></script>
<script th:src="@{/assets/lib/layer/layer.js}"></script>
<script th:src="@{/assets/lib/jQuery/jquery-3.7.0.min.js}"></script>
<script th:inline="javascript">
    let ctx = /*[[@{/}]]*/"";
    if (ctx.endsWith("/")){
        ctx = ctx.substring(0,ctx.length-1);
    }
    const error = /*[[${error}]]*/"";
</script>
<script>
    // Client type Panel
    $('input[name="client_type"]').on("click", function() {
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    });
</script>
<script>
    $(()=>{
        $("#captchaPic").click(function (){
            $(this).attr("src",ctx + "/user/captcha?id=" + Math.random());
        })
        if (error){
            layer.msg(error);
        }
        // $("#user-login").click(function (e){
        //     e.preventDefault();
        //     let form = $("#user-login");
        //     let username = $("#username").val();
        //     let password = $("#password").val();
        //     let captcha = $("#captcha").val();
        //     console.log(form);
        //     console.log(username);
        //     console.log(password);
        //     console.log(captcha)
        //
        //     if (username === ''){
        //         layer.msg("用户名不能为空");
        //     }else if (password === ''){
        //         layer.msg("密码不能为空");
        //     }else if (captcha === ''){
        //         layer.msg("请输入验证码")
        //     }else{
        //         let url = ctx + "/user/login"
        //         $.ajax({
        //             url,
        //             method:"post",
        //             dataType:"json",
        //             data:{
        //                 username,
        //                 password,
        //                 captcha
        //             },success(resp){
        //                 if (resp.error){
        //                     layer.msg(resp.error)
        //                 }else{
        //                     layer.msg("登录成功")
        //                 }
        //
        //             }
        //         })
        //     }
        // })
    })

</script>
</html>